<!-- 提交审核弹窗 -->
<template>
  <el-dialog
      :model-value="dialogVisible"
      title="提交审核"
      width="500px"
      :show-close="false"
      :close-on-click-modal="false"
      append-to-body
      class="template-audit"
  >
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        size="default"
        label-position="left"
    >
      <el-form-item label="模板分类：" prop="categoryIds">
        <el-select v-model="ruleForm.categoryIds" placeholder="请选择模板分类" multiple>
          <el-option
              v-for="(item, index) in categoryList"
              :key="index"
              :label="item.categoryName"
              :value="item.categoryId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="模板预览图:">
        <el-upload
            class="avatar-uploader"
            :action="uploadAddress()"
            :headers="{ Authorization: appStore.useTokenStore.token }"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar"/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancle">取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submit(ruleFormRef)"
        >提交审核</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import CONFIG from '@/config';
import {getCategoryListAsync} from '@/http/api/category';
import {FormInstance, FormRules, UploadProps} from 'element-plus';
import appStore from '@/store';
import {addTemplateAsync} from '@/http/api/resume';
import {storeToRefs} from 'pinia';

const {resumeJsonNewStore} = storeToRefs(appStore.useResumeJsonNewStore);
const emit = defineEmits(['cancle']);

interface TDialog {
  dialogVisible: boolean;
  templateId: string;
  previewUrl: string;
  categoryIds: any;
}

const props = withDefaults(defineProps<TDialog>(), {
  dialogVisible: false,
  templateId: '',
  previewUrl: '',
  categoryIds: []
});

interface ITemplate {
  categoryIds: Array<string>;
  imageUrl: string;
  templateId: string,
}

// 表单填写数据
const ruleForm = reactive<ITemplate>({
  categoryIds: props.categoryIds,
  imageUrl: props.previewUrl,
  templateId: props.templateId,
});

const rules = reactive<FormRules>({
  categoryIds: [{required: true, message: '模板分类不能为空', trigger: 'change'}]
});

// 取消
const cancle = () => {
  emit('cancle');
};

// 提交审核
const submitLoading = ref<boolean>(false);
const ruleFormRef = ref<FormInstance>();
const router = useRouter();
const route = useRoute();
const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (!ruleForm.imageUrl) {
        ElMessage.error('模板预览图不能为空');
        return;
      }
      submitLoading.value = true;
      let params = {
        previewUrl: ruleForm.imageUrl,
        categoryIds: ruleForm.categoryIds,
        id: ruleForm.templateId,
        name: resumeJsonNewStore.value.name,
        title: resumeJsonNewStore.value.title,
        layout: resumeJsonNewStore.value.layout,
        components: resumeJsonNewStore.value.components,
        globalStyle: resumeJsonNewStore.value.globalStyle
      };
      const data = await addTemplateAsync(params);
      if (data.code === 200) {
        submitLoading.value = false;
        ElMessage({
          message: '提交审核成功，审核结果将在个人中心可以查询',
          type: 'success'
        });
        ruleForm.id = data.data;
        const path = route.path;
        await router.replace(`${path}?templateId=${data.data}`);
        emit('cancle');
      } else {
        submitLoading.value = false;
        ElMessage({
          message: data.msg,
          type: 'error'
        });
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};

// 查询分类列表
const categoryList = ref<any>([]);
const getCategoryList = async () => {
  const data = await getCategoryListAsync();
  if (data.code) {
    categoryList.value = data.data.map((item: { name: any; id: any }) => {
      return {
        categoryName: item.name,
        categoryId: item.id
      };
    });
  } else {
    ElMessage.error(data.msg);
  }
};
getCategoryList();

// 上传文件地址
const uploadAddress = () => {
  return CONFIG.serverAddress + '/api/file/uploadImg/metadata';
};

const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
  ruleForm.imageUrl = response.data.url;
};

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 3) {
    ElMessage.error('预览图不能大于3M');
    return false;
  }
  return true;
};
</script>
<style lang="scss">
.template-audit {
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    width: 260px;
    height: 365px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 48px;
    color: #8c939d;
    width: 260px;
    height: 365px;
    text-align: center;
  }
}
</style>
